<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>

        <title> Red Sea Bio-geographic Information System</title>
        <?php use_helper('I18N') ?>
        <?php include_http_metas() ?>
        <?php include_metas() ?>
        <?php include_title() ?>
        <link rel="shortcut icon" href="/favicon.ico" />
        <?php include_stylesheets("main.css") ?>
        <?php include_javascripts() ?>
        <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"></script>

        <script type="text/javascript" src="/js/jquery.js"></script>

        <script src="/js/ui/jquery.ui.core.js"></script>
        <script src="/js/ui/jquery.ui.widget.js"></script>

        <script src="/js/ui/jquery.ui.button.js"></script>



        <script type="text/javascript" src="/js/Master_Search/searchbox.js"></script>
        <script type="text/javascript" src="/js/Module_searchresult/index.js"></script>
        <script src="/js/ui/jquery.ui.core.js"></script>
        <script type="text/javascript" src="/js/Flot/jquery.flot.js"></script>
        <script type="text/javascript" src="/js/Flot/jquery.flot.stack.js"></script>
        <script language="javascript" type="text/javascript" src="/js/Flot/jquery.flot.text.js"></script>
      <!-- <script language="javascript" type="text/javascript" src="/js/General/Canvas2Image.js"></script>-->
        <script type="text/javascript" src="/js/Main_Module/map.js"></script>
        <script type="text/javascript" src="/js/General/general.js"></script>
        <script src="/js/ui/jquery.ui.widget.js"></script>
        <script src="/js/ui/jquery.ui.accordion.js"></script>
        <script src="/js/ui/jquery.ui.position.js"></script>
        <script src="/js/ui/jquery.ui.autocomplete.js"></script>
        <script type="text/javascript" src="/js/ui/jquery.ui.autocomplete.js"></script>

        <script src="/js/ui/jquery.ui.button.js"></script>
        <script type="text/javascript" src="/js/JQuery/Default_Text/jquery.defaultText.js"></script>







        <script type="text/javascript" src="/js/Master_Search/jquery.autocomplete.js"></script>
        <link rel="stylesheet" type="text/css" href="/css/Master_Search/jquery.autocomplete.css" />






        <link rel="stylesheet" href="/css/theme/ui-lightness/jquery.ui.all.css">
<!--[if IE]><script language="javascript" type="text/javascript" src="/js/Flot/excanvas.js"></script><![endif]-->


    </head>
    <body>


        <LINK REL="SHORTCUT ICON"
              HREF="/images/logosmall.png">
            <table id="header">
                <tr>
                    <td rowspan="2" width="170"><img id="mainico" height="45" widht="147" alt="Red Sea 2.0" src="/images/rbis_text.png" /></td>
                    <?php if ($sf_user->isAuthenticated()): ?>
                        <td>
                            <?php echo "Welcome ". $sf_user->getUsername(); ?>
                        </td>
                        <td id="logout" width="50" >
                            <?php echo link_to('Logout', 'sf_guard_signout') ?>
                        </td>
                    <?php else: ?>
                            <form action="<?php echo url_for('login/index') ?>" name="Login" method="POST">
                                <?php
                                if ($sf_user->hasFlash('msg')) {
                                    echo $sf_user->getFlash('msg');
                                }
                                ?>
                                <td width="170px"><input class="loginbox" style="width: 90%" title="Email" type="text" name="Email" value="Email" size="20"/></td>
                                <td width="170px"><input class="loginbox" style="width: 90%" type="password" name="Password" title="123" value="123" size="20"/></td>
                                <td width="60px"><a id="buttonlogin" class="button" href="javascript: void(0);" onclick="document.Login.submit();return false;">Login</a></td>
                            </form>
                    <?php endif ?>

                    <td rowspan="2"></td>

                    <td rowspan="2" width="40px" align=>
                        <!--                <a class="bigbutton" onclick="setOverlayImage();">
                                            <div class="topright">
                                                <img id="reporting" alt="Report/Charts" src="/images/overlay_button_inactive.png"/><p>Overlay</p>
                                            </div>

                                        </a>
                                            <input type="hidden" value="1" name="hfBtnOverlayStatus" id="hfBtnOverlayStatus" />-->
                    </td>

                    <td rowspan="2" width="40px">
                        <!--                <a class="bigbutton" onclick="return updateObservationStatus(document.getElementById('hfBtnObservationStatus'),'imgObservation','/images/btn_observation_enabled.png','/images/btn_observation_disabled.png');">
                                            <div class="topright">
                                                <img id="reporting" name="imgObservation" alt="Points of Observations" src="/images/btn_observation_enabled.png" /><p>Observation</p>
                                            </div>
                                        </a>
                                            <input type="hidden" value="1" name="hfBtnObservationStatus" id="hfBtnObservationStatus" />-->
                    </td>

                    <td rowspan="2" width="40px" align="center">
                        <a class="bigbutton report-slide" href="" id="lnkChart">
                            <div class="topright report-slide">
                                <img id="imgChart" alt="Report/Charts" src="/images/report_button.png"/><p>Report</p>
                            </div>
                        </a>
                        <input type="hidden" value="0" name="hfBtnChartStatus" id="hfBtnChartStatus" />
                    </td>

                    <td rowspan="2" width="75px" style="border-left: 1px white dashed" align="center">
                        <a class="bigbutton" onclick="updateImage()"> <!--updateImage();-->
                            <div class="topright">
                                <img id="reporting" name="imgObservation" alt="Points of Observations" src="/images/save.png" width="35px" height="35px" />Save
                            </div>
                        </a>
                    </td>





                    <form action=""  method="post" id="form1">


                        <td width="250px"><input id="searchbox" type="text" name="Search"  size="50"  value="Search the web..." class="ui-autocomplete-input"/></td>
                        <td width=40px"><a id="search" href=""><img alt="Report/Charts" src="/images/search_button.png" /></a></td>

                    </form>
                </tr>

                <tr>
                    <?php if (!$sf_user->isAuthenticated()): ?>
                        <td><p><input type="checkbox" name="Remember me" value="OFF" />Remember me </p></td>
                        <td><a href="">Forgot the password?</a></td>
                    <?php endif;?>
                    <td></td>
                    <td></td>

                    <td colspan="2" width="250px" class="ShowHideButton">

                        <a><img class="btn-slide" name="imgshowhide" alt="Points of Observations" src="/images/show_accordion.png" height="23px;"/></a>

                        <input type="hidden" value="1" name="hfBtnshowhideStatus" id="hfBtnshowhideStatus" />

                    </td>
                </tr>
            </table>

            <div id="reportarea">
                <table id="reportarea_table">
                    <tr>
                        <td id="tdNoData" rowspan="2" style="border-right: 1px silver dashed"><div id="chart_canvas"> </div></td>
                        <td width="100%" colspan="2" style="border-bottom: 1px silver dashed;">
                            <div id="chart_legend">
                                <!--<span class='caption'>Legend: </span>-->
                                <span id='spFishList'></span>
                            </div>
                        </td>
                    </tr>
                    <tr>
<!--                        <td width="170px">
                            <div id="hide_data">
                                <span class='caption'>&nbsp;Unit: </span>
                                <span id='spUnitList'></span>
                                <br/>
                                <span class='caption'>&nbsp;Depth: </span>
                                <span id='spDepthList'></span>
                                <br/>
                                <span class='caption'>&nbsp;Year: </span>
                                <span id='spYearList'></span>

                            </div>
                        </td>-->
                        <td align="center"  valign="middle" colspan="2">
                            <a onclick="saveFlotGraphAsPNG('chart_canvas','content')" href="#"><img id="reporting" name="imgObservation" alt="Points of Observations" src="/images/save.png" width="22px" height="22px" style="margin:0px;padding:0px;"/><p>Save Report</p></a>
                        </td>
                    </tr>
                </table>


            </div>

            <div id="panel" >

                <div id="accordion">

                    <h3><a href="#">Search Results<span id="TotalCount"></span></a></h3>

                    <div id="searchresult" >


                    </div>

                    <h3 id="citation_heading"><a href="#">Citation</a></h3>
                    <div id="citation">

                    </div>
                    <h3><a href="#">History</a></h3>
                    <div id="history">

                    </div>

                </div>

            </div>

            <div id="map">
                <div id="charts"></div>
                <div id="rightbar"></div>
            </div>

<?php include_component('general', 'SetAttributeReport'); ?>
                            <div id="mask"></div>
                            <div id="content">

<?php echo $sf_content ?>

            </div>

    </body>
</html>
